<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>行业目标值管理</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-ui/jquery-ui.js"></script>

<script src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/bootstrap-table.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/tableExport.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/table-export.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/jquery.base64.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/ui/layui/layui.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/layui/lay/modules/laydate.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/layui/lay/modules/layer.js" type="text/javascript"></script>
 <script src="${pageContext.request.contextPath}/ui/layui/lay/modules/form.js" type="text/javascript"></script>
 <link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/laydate/laydate.css" >
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-css/jquery-ui.css">
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-css/bootstrap.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/table/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/layui.css" >
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/global.css" >
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/layer/default/layer.css" >
 <link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/code.css" >


 <style>
  .container{
   	width:85%;
   	
  }
  
  .modal-industry{
  	width:700px;
  }
  .modal-body{
    max-height:750px
  }
   .modal-body-industry{
  	height:450px;
  }
 </style>

</head>

<body>
<%@include file="/webpage/frame/top.jsp" %>
<div class="container">
	<div id="modal" class="modal-industry modal fade" style="display:none">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                    <span class='alert_input'></span>
                </div>
  				<div class="modal-body-industry modal-body">
  				<div class="form-group" hidden="true">
                        <label>行业id：</label>
                        <input id="id" type="text" class="form-control" name="id" placeholder="行业id" maxlength="20" readonly="readonly">
                    </div>
                    <div class="form-group">
                        <label>行业名称：</label>
                        <input id="industryName" type="text" class="form-control" name="industryName" placeholder="行业名称" maxlength="20" readonly="readonly">
                    </div>
                    <div class="form-group">
                        <label>日咨询量目标：</label>
                        <input id="avgConsultGoal" type="text" class="form-control" name="avgConsultGoal" placeholder="日咨询量目标" maxlength="20" >
                    </div>
                     <div class="form-group">
                        <label>日转化成本目标：</label>
                        <input id="avgConversionGoal" type="text" class="form-control" name="avgConversionGoal" placeholder="日转化成本目标" maxlength="20" >
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary submit">提交</button>
                </div>
            </div>
        </div>
    </div>
     
		<table id="industryGoaltable"  data-show-refresh="true"
               data-search="true"
               data-click-to-select="true"
               data-show-export="true"
               data-query-params="queryParams"
			   data-pagination="true"		   
               data-toolbar=".toolbar"  
               >
               <!-- data-show-columns="true" -->
            <thead>
            <tr>
            <th data-field="id" data-show="true"  data-visible="false">id</th>
            <th data-field="industryName"   data-sortable="true">行业</th>
            <th data-field="avgConsultGoal"  data-sortable="true">日均咨询量目标</th>
            <th data-field="avgConversionGoal"  data-sortable="true">日均转化成本目标</th>
            <th data-field="action"
                    data-align="center"
                    data-formatter="actionFormatter"
                    data-events="actionEvents">操作</th>
           </tr>
            </thead>
			
		</table>
		<font color="#FF0000">注：-1表示无穷大 , -2表示无数据</font>
</div>		
	
<!-- 上传组件初始化代码 -->
<script>

    var API_URL = '${pageContext.request.contextPath}/industryGoalController.do?getALLIndustryByPage';
			
    //加载行业列表
	var $table = $('#industryGoaltable').bootstrapTable(
   		{
   			url: API_URL,
   			pageSize:25,
   			pageList : [15, 25, 100, 500]
   		}   		  
  		 ),     
       $modal = $('#modal').modal({show: false}),
       $alert = $('.alert').hide(),
	   $alert_input = $('.alert_input').hide();
		
   
	//延迟加载
    $(function () {
    	 TableExport.init();
    	
        // create event
        $('.create').click(function () {
            showModal($(this).text());
        });

        $modal.find('.submit').click(function () {       	 
        	var prevent = false;
        	var submitPath = '${pageContext.request.contextPath}/industryGoalController.do?doAddOrUpdate';       	
            var row = {};

            if($modal.data('id')){
            	row['id']=$modal.data('id');
            }
        	
            if($("[name=industryName]").val() != '') {
            	row['industryName'] = $("[name=industryName]").val();
            }
            if($("[name=avgConsultGoal]").val() != '') {
            	row['avgConsultGoal'] = $("[name=avgConsultGoal]").val();
            }
            if($("[name=avgConversionGoal]").val() != '') {
            	row['avgConversionGoal'] = $("[name=avgConversionGoal]").val();
            }
            
           
            setTimeout(function(){
	            if(prevent==true){          		
	            	return false;//阻止后续提交
	            }
	            $.ajax({
	                url: submitPath,
	                type: 'post',
	                contentType: 'application/json',
	                dataType: 'json', //预期的服务器响应的数据类型。
	                data: JSON.stringify(row),
	                success: function (data) {
	                    $modal.modal('hide');
	                    $table.bootstrapTable('refresh');
	                	if(data.success==true) {                   
	                    	showAlert(($modal.data('id') ? '更新' : '新建') + '行业目标设置成功', 'success');                		                		
	                	}
	                	else {
		                    showAlert(($modal.data('id') ? '更新' : '新建') + '行业目标设置失败', 'danger');              		
	                	}
	                },
	                error: function () {
	                    $modal.modal('hide');
	                    showAlert(($modal.data('id') ? '更新' : '新建') + '行业目标设置失败,异常', 'danger');
	                }
	            });                            	
            },800);
        });
        
    });	
	

    function queryParams(params) {
        return {};
    }

    function actionFormatter(value) {
        return [
            '  <a class="update btn btn-default" href="javascript:" title="设置行业目标值">设置</a>',
            /* '  <a class="remove btn btn-default" href="javascript:" title="删除行业信息">删除</a>', */
        ].join('');
    }
    
    

    // update and delete events
    window.actionEvents = {
        'click .update': function (e, value, row) {
        	showModal_update($(this).attr('title'), row);
        }
        
    };

    //弹出窗口-创建
    function showModal(title, row) {
        row = row || {
        	id: '',
            industryName: ''
            
        }; // default row value

        $modal.data('id', row.id);
        $modal.find('.modal-title').text(title);
        
        for (var name in row) {
            $modal.find('input[name="' + name + '"]').val(row[name]);

        }
		
        $modal.modal('show');
    }
    
    //弹出窗口-修改
    function showModal_update(title, row) {
        row = row || {
        	industryId: '',
            industryName: ''
            
        }; // default row value

        $modal.data('id', row.id);
        $modal.find('.modal-title').text(title);
        
        for (var name in row) {
            $modal.find('input[name="' + name + '"]').val(row[name]);
        } 

                
    	$modal.modal('show');
    }   
    function showAlert(title, type) {
        $alert.attr('class', 'alert alert-' + type || 'success')
              .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
        setTimeout(function () {
            $alert.hide();
        }, 3000);
    }
    
    function showAlertModal(title, type) {
    	
    	$alert_input.attr('class', 'alert alert-' + type || 'success')
              .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
    	 setTimeout(function () {
    		 	$alert_input.hide();
         }, 3000);
        
    }    
    

    
   
</script>
<%@include file="/webpage/frame/bottom.jsp" %>
</body>
</html>